<template>
  <div class="home">
    welcome
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {

  }
}
</script>
<style scoped>
 .home{
     /* width: 300px; */
     height: 300px;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     text-align: center;
     font-size: 108px;
     animation-name: example; /* 定义动画名字 */
     animation-duration: 3s;/* 动画持续时间 */
     animation-iteration-count: infinite;/* 动画持续次数infinite或数字 */
 }
 /* 动画代码 */
@keyframes example {
  0%   {
    transform: rotateY(0);
    }
  /* 10%  {
    transform: rotateY(36deg);
    }
  20%  {
    transform: rotateY(72deg);
    }
  30%  {
    transform: rotateY(108deg);
    }
  40% {
    transform: rotateY(144deg);
    } */
  50%   {
    transform: rotateY(180deg);
    }
  /* 60%  {
    transform: rotateY(216deg);
    }
  70%  {
    transform: rotateY(252deg);
    }
  80%  {
    transform: rotateY(288deg);
    }
  90% {
    transform: rotateY(324deg);
    } */
  100% {
    transform: rotateY(360deg);
    }
}
</style>
